{% extends "base.html" %}

{% block title %}
  <title class = "title">{{title}}</title>
{% endblock %}

{% block content %}
<div class="carousel">
  <div class="carousel-inner">
    <div class="">
      <img src="{{ url_for('static', filename='header.jpg') }}" width="100%" height="100%" alt="header">
      <div class="container">
        <div class="carousel-caption text-left">
          <h1>Measuring Anxiety Through Fitbit</h1>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="jumbotron">
  <div class="row">
    <div class="col-lg-4 center">
      <img src="{{ url_for('static', filename='fitbit.jpeg') }}" alt="fitbit" width="140" height="140"
           class="border_change">
      <h2>Register Fitbit</h2>
      <p>Register your Fitbit to make full use of our app. </p>
    </div>
    <div class="col-lg-4 center">
      <img alt="survey" src="{{ url_for('static', filename='survey.jpeg') }}" width="140" height="140"
           class="border_change">
      <h2>Get Survey</h2>
      <p>Once you have registered your Fitbit, users will get a survey if the heart rate reaches a certain bpm.</p>
    </div>
    <div class="col-lg-4 center">
      <img alt="analysis" src="{{ url_for('static', filename='analyze.png') }}" width="140" height="140"
           class="border_change">
      <h2>Analyze Data</h2>
      <p>Survey responses and your heart rate data will be analyzed to give you reasons and solutions to your anxiety. </p>
    </div>
  </div>

  <div class="flex">
    <button type="button" class="btn btn-info" onclick="window.location.href='about'">Click here to learn more about our project</button>
  </div>
</div>
{% endblock %}

